<template>
  <div class="box" :class="{ isAnimate: isAnimate }">
    {{ 1 + 1 }}
  </div>
  <component :is="component"></component>
  <div>
    <button @click="add">添加</button>
  </div>
  <div ref="custom"></div>
</template>
<script lang="jsx">
import custom1 from './components/custom1.vue'
import { ref, createApp, h, render } from 'vue'
import { mat2d } from '../../libs/glmatrix/gl-matrix-min.js'

export default {
  components: {},
  data() {
    return {
      component: null,
      isAnimate : false,
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      /*this.component = custom1*/
      this.$global_api.add()
      const node = <div>helloworld</div>;
      console.log(node);
      this.isAnimate = !this.isAnimate;

      //105 = 100 + 5
    }
  },
  mounted() {
    console.log(`helloworld`);
    let m = mat2d.create();
    mat2d.translate(m,m,[100,0]);
    console.log(m);
    //100 50
    /*
    1 0   x'
    0 1   y'
    x y   1

    1 0 x  x
    0 1 y  y
           1
    */

  }
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition: all 0.5s ease;
  &.isAnimate {
    //transform: matrix(0.5, 0, 0, 0.5, 100, 50);
    //transform: matrix(1, 0, -1, 1, 0, 0);
    transform: matrix(1, -0.2, 0, 1, 0, 0);
    //animation: move 0.5s linear;
  }
}
@keyframes move {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  25% {
    transform: matrix(1, 0, -0.2, 1, 0, 0);
  }
  75% {
    transform: matrix(1, 0, 0.2, 1, 0, 0);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
</style>
